<template>
    <div class="main">
        <div class="header">
            <a href="/"><img width="200" src="../../assets/img/logo3.png" alt=""></a>
            <h1>用户注册</h1>
        </div>
        <!-- 
          表单具有默认的提交行为，默认是同步的，同步表单提交，浏览器会锁死（转圈儿）等待服务端的响应结果。
          表单的同步提交之后，无论服务端响应的是什么，都会直接把响应的结果覆盖掉当前页面。

          后来有人想到了一种办法，来解决这个问题。
      -->
        <form @submit.prevent="register">
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" @blur="checkEmail" @input="checkEmail" class="form-control" v-model="formData.email" required placeholder="Email" autofocus>
                <p class="error-message" v-show="emailMessage">邮箱已经存在</p>
            </div>
            <div class="form-group">
                <label for="nickname">昵称</label>
                <input type="text" class="form-control" v-model="formData.nickname" required placeholder="Nickname">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" required class="form-control" v-model="formData.password" placeholder="Password">
            </div>
            <button type="submit" class="btn btn-success btn-block">注册</button>
        </form>
        <div class="message">
            <p>已有账号?
                <router-link to="/login">点击登陆</router-link>.</p>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import _ from 'lodash'

export default {
    data() {
        return {
            formData: {
                nickname: '',
                email: '',
                password: ''
            },
            emailMessage: false
        }
    },
    methods: {
        async register() {
            try {
                if (this.emailMessage) {
                  return
                }
                const data = await axios.post('/api/users', this.formData)
                this.$router.push('/')
            } catch(err) {
                // try 中的程序级错误和状态码错误 400 500 都会进入 catch
                const {status} = err.response
                switch (status) {
                    case 400:
                        this.emailMessage = true
                        break;
                }
            }
            // 绝对路径不经过 dev-server 直接去请求 http://localhost:3000/users
            // 所以我们必须要先把请求告诉 dev-server 然后它会按照你设定好的规则去代理转发
            // 不是所有请求都要走代理的，所以我们这里设定了一个规则
            //      当请求路径是以 /api 开头的时候，则我帮你代理到 http:/localhost:3000目标服务器
            // const ret = await axios.get('/api/topics')
            // console.log(ret) 
        },
        checkEmail: _.debounce(async function() {
            const { data } = await axios.get(`/api/users?email=${this.formData.email}`)
            this.emailMessage = data.user ? true : false
        }, 500)
    }
}
</script>
<style>
body {
    background-color: #f9f9f9;
}

.main {
    width: 340px;
    margin: 0 auto;
    margin-top: 50px;
    color: #333;
}

.main .header {
    text-align: center;
}

.main .header h1 {
    font-size: 26px;
}

.main form {
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid #d8dee2;
    border-radius: 5px;
    background-color: #fff;
}

.main .message {
    padding: 10px;
    padding-bottom: 0;
    border: 1px solid #d8dee2;
    border-radius: 5px;
}

form .error-message {
    color: #f00;
}
</style>